<template>
	<view class="container flex flex-column">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="market-container flex flex-column" :class="c_bottomStyle">
			<view class="header">
				<text class="title">行情</text>
			</view>
			<u-tabs height="84" :list="tabList" :current="current" @change="change"></u-tabs>
			<view class="market-header flex">
				<text class="market-header-item">品种</text>
				<text class="market-header-item">卖出</text>
				<text class="market-header-item">买入</text>
			</view>
			<scroll-view scroll-y="true" class="scroll-view">
				<router-link :to="{path:'/pages/stockDetail/stockDetail',query:{id:item.id,name:item.ptitle}}"
					class="scroll-item flex" v-for="item in c_marketList" :key="item.id">
					<view class="flex flex-column flex-1">
						<text class="code">{{item.xcode}}</text>
						<text class="name mt-10">{{item.ptitle}}</text>
						<text class="delta mt-10">手续费:{{item.fee_buy}}</text>
					</view>
					<view class="flex flex-1 flex-column">
						<text class="change"
							:style="{color:item.change>=0?getUpColor:getDownColor}">{{(item.change*100).toFixed(2)}}%</text>
						<text class="BP1 mt-10" :style="{color:item.BP1_UP?getUpColor:getDownColor}">{{item.BP1}}</text>
						<text class="low mt-10">最低:{{item.Low}}</text>
					</view>
					<view class="flex flex-1 flex-column">
						<text class="change-num">{{item.change_num}}</text>
						<text class="SP1 mt-10" :style="{color:item.SP1_UP?getUpColor:getDownColor}">{{item.SP1}}</text>
						<text class="low mt-10">最高:{{item.High}}</text>
					</view>

				</router-link>
			</scroll-view>
			<view class="flex bottom-option-wrapper" v-if="c_bottomStyle=='padding-option-bar'">
				<router-link class="login-btn"
					:to="{path:'/pages/login/login',query:{redirect:'/pages/market/market'}}">登录</router-link>
				<router-link to="/pages/register/register" class="register-btn">开户</router-link>
			</view>
			<view class="bottom-account-wrapper" v-else>
				<view class="flex justify-center expend-wrapper align-center" @tap="isExpend=!isExpend">
					<u-icon class="arrow-down" :class="isExpend?'arrow-up':''" name="arrow-down" color="#fff"></u-icon>
				</view>
				<view class="flex bottom-account-item-wrapper align-center">
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{getUserInfo.nickname}}</text>
						<text class="bottom-account-item-text">{{isMock?'体验账号':'真实账号'}}</text>
					</view>
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.yingkui_sum}}</text>
						<text class="bottom-account-item-text">持仓盈亏</text>
					</view>
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.baozhengjin_rate}}%</text>
						<text class="bottom-account-item-text">保证金比例</text>
					</view>
					<router-link to="/pages/deposit/deposit" class="deposit-btn-wrapper flex justify-center">
						<view class="deposit-btn">存款</view>
					</router-link>
				</view>
				<view class="flex bottom-account-item-wrapper align-center" v-if="isExpend">
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.jingzhi}}</text>
						<text class="bottom-account-item-text">净值</text>
					</view>
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.money_keyong}}</text>
						<text class="bottom-account-item-text">可用保证金</text>
					</view>
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.baozhengjin_sum}}</text>
						<text class="bottom-account-item-text">已用保证金</text>
					</view>
					<view class="flex bottom-account-item flex-column align-center">
						<text class="bottom-account-item-text">{{accountInfo.money_yue}}</text>
						<text class="bottom-account-item-text">余额</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createWebsocket,
		sendSocketMessage
	} from '@/websocket/index.js'
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				current: 0,
				timer: null,
				marketList: [],
				tabList: [],
				isExpend: false,
				accountInfo: {},
				storageList: []
			};
		},
		computed: {
			...mapState("user", ["isMock"]),
			...mapGetters("user", ["getToken", "getUserInfo", "getUpColor", "getDownColor"]),
			c_bottomStyle() {
				if (this.getToken) {
					if (this.isExpend) {
						return "padding-account-expend-bar"
					}
					return "padding-account-bar"
				} else {
					return "padding-option-bar"
				}
			},
			c_marketList() {
				if (!this.marketList.length) {
					return []
				} else {
					let list = this.marketList.map(item => {
						delete item.pro.sort

						//分类sort排序
						let obj_arr = Object.values(item.pro).sort(function(a, b) {
							return b.sort - a.sort;
						})
						return obj_arr
					})

					//全部sort排序
					let allMarketList = list.flat().reverse().sort(function(a, b) {
						return b.sort - a.sort;
					})

					if (!this.storageList.length) {
						this.storageList = allMarketList
					} else {
						this.storageList.map((item, index) => {
							if (parseFloat(item.SP1) > parseFloat(allMarketList[index].SP1)) {
								this.$set(allMarketList[index], "SP1_UP", false)
							} else {
								this.$set(allMarketList[index], "SP1_UP", true)
							}
							if (parseFloat(item.BP1) > parseFloat(allMarketList[index].BP1)) {
								this.$set(allMarketList[index], "BP1_UP", false)
							} else {
								this.$set(allMarketList[index], "BP1_UP", true)
							}
						})
						this.storageList = allMarketList
					}
					let totalMarketList = [allMarketList, ...list]

					return totalMarketList[this.current]
				}
			},
		},
		methods: {
			change(index) {
				this.current = index;

			},
			websocketOpenCallback() {
				sendSocketMessage(JSON.stringify({
					action: "forlist3",
					token: this.getToken
				}))
				this.getToken && sendSocketMessage(JSON.stringify({
					action: "ajaxorder_list",
					token: this.getToken
				}))
				this.timer = setInterval(() => {
					sendSocketMessage(JSON.stringify({
						action: "forlist3",
						token: this.getToken
					}))
					this.getToken && sendSocketMessage(JSON.stringify({
						action: "ajaxorder_list",
						token: this.getToken
					}))
				}, 1000)
			},
			websocketMessageCallback({
				data
			}) {
				if (data.action == "forlist3") {
					this.marketList = data.res.data.newpro[0].body
					let tabs = this.marketList.map(item => ({
						name: item.name
					}))
					if (!this.tabList.length) {
						this.tabList = [{
							name: "全部"
						}, ...tabs]
					}
				} else if (data.action == "ajaxorder_list") {
					this.accountInfo = data.res.data;
				}
			}
		},
		onShow() {
			//websocket
			createWebsocket()
			this.websocketOpenCallback()
			uni.$on("websocketMessage", this.websocketMessageCallback)
		},
		onHide() {
			uni.$off("websocketMessage", this.websocketMessageCallback)
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.market-container {
			position: relative;
			height: calc(100% - var(--status-bar-height));
			box-sizing: border-box;

			.header {
				height: 82rpx;
				padding-left: 30rpx;
				background-color: #fff;

				.title {
					font-size: 40rpx;
					font-weight: 600;
					color: #000000;
					line-height: 112rpx;
				}
			}

			.market-header {
				padding: 0 30rpx;
				height: 80rpx;
				background-color: $color-gray;

				.market-header-item {
					flex: 1;
					color: #999999;
					font-size: 28rpx;
					line-height: 80rpx;
					text-align: left;
				}
			}

			.scroll-view {
				height: calc(100% - 246rpx);
				background-color: #fff;

				.scroll-item {
					padding: 10rpx 30rpx 10rpx;
					border-bottom: 1rpx solid $color-gray;

					.flex-1 {
						flex: 1;
					}

					.code {
						color: $color-blue;
						font-size: 28rpx;
					}

					.name {
						font-size: 30rpx;
						color: #000000;
					}

					.delta {
						font-size: 24rpx;
						color: #5D667A;
					}

					.change {
						font-size: 24rpx;
					}

					.BP1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.low {
						font-size: 24rpx;
						color: #5D667A;
					}

					.change-num {
						font-size: 24rpx;
						color: #999999;
					}

					.SP1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.low {
						font-size: 24rpx;
						color: #5D667A;
					}
				}

			}

			.bottom-option-wrapper {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100rpx;

				.login-btn {
					font-size: 24rpx;
					color: #fff;
					line-height: 100rpx;
					text-align: center;
					flex: 1;
					background: $color-blue;
				}

				.register-btn {
					font-size: 24rpx;
					color: #fff;
					line-height: 100rpx;
					text-align: center;
					flex: 1;
					background: $color-pink;
				}
			}

			.bottom-account-wrapper {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;

				.expend-wrapper {
					height: 40rpx;
					background: linear-gradient(128deg, #3B65E1 0%, #4571EC 100%);
					opacity: 0.73;

					.arrow-down {
						transition: transform .3s ease;
					}

					.arrow-up {
						transform: rotate(180deg);
					}
				}

				.bottom-account-item-wrapper {
					animation: expend .3s ease;
					height: 100rpx;
					background: linear-gradient(128deg, #3B65E1 0%, #4571EC 100%);

					.bottom-account-item {
						flex: 1;
					}

					.bottom-account-item-text {
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;

						&:last-child {
							margin-top: 5rpx;
							font-size: 24rpx;
							color: rgba(255, 255, 255, 0.8);
						}
					}

					.deposit-btn-wrapper {
						flex: 1;

						.deposit-btn {
							width: 128rpx;
							height: 54rpx;
							background: #FFFFFF;
							border-radius: 27rpx;
							font-size: 24rpx;
							color: $color-blue;
							line-height: 54rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.padding-account-expend-bar {
			padding-bottom: 240rpx;
		}

		.padding-account-bar {
			padding-bottom: 140rpx;
		}

		.padding-option-bar {
			padding-bottom: 100rpx;
		}
	}
</style>
